<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
  <link rel="stylesheet" type="text/css" href="{$_G['URL']['PLUGIN_CSS']}shopplan/static/css/reset.css">
  <link rel="stylesheet" type="text/css" href="{$_G['URL']['PLUGIN_CSS']}shopplan/static/css/swiper.min.css">
  <link rel="stylesheet" type="text/css" href="{$_G['URL']['PLUGIN_CSS']}shopplan/static/css/style.css?v=1">
  <script src="{$_G['URL']['PLUGIN_CSS']}shopplan/static/js/screen.js"></script>
  <script src="{$_G['URL']['PLUGIN_CSS']}shopplan/static/js/jquery.js"></script>
  <script src="{$_G['URL']['PLUGIN_CSS']}shopplan/static/js/swiper.min.js"></script>
  <!-- <script src="{$_G['URL']['PLUGIN_CSS']}shopplan/static/js/LiftEffect.js"></script> -->
  <script src="{$_G['URL']['LOTTERY_CSS']}lottery/js/layer/layer.js"></script>
  <style type="text/css">
  	.timeSlide{
		position: fixed;
		top: 1.44rem;
		bottom: 1rem;
        right: 0.3rem;
        left: 2.3rem;
		overflow-y: scroll;
	}
	.timeSlide li:nth-child(1) {
	    margin-top: 0;
	}
	.leftSlide{
		position: fixed;
		top: 1.44rem;
		bottom: 1rem;
		overflow-y: scroll;
	}
	.timeBox {
	    overflow: visible;
	}
	.timeBox::after {
		content: "";
		display: block;
		clear: both;
	}
	.timeBox dt {
	    width: 1.07rem;
		height: 0.56rem;
	    padding: 0;
		border-radius: 0.28rem;
		position: relative;
		line-height: 0.56rem;
	}
	
	.timeBox dt span{
		position: relative;
		z-index: 9;
		height: 0.56rem;
		line-height: 0.604rem;
		font-size: 0.22rem;
	}
	.timeBox dt.cur {
	    color: #ffffff;
	    /* background: linear-gradient( to right ,#449ea6, #1d7980); */
	}
	.timeBox dt::after{
		content: "";
		display: block;
		position: absolute;
		left: 0;
		bottom: 0;
		right: 0;
		top: 0;
		margin: auto;
		width: 0;
		height: 0;
		background: linear-gradient( to right ,#449ea6, #1d7980);
		z-index: 1;
		border-radius: 0.28rem;
		transition: all 0.3s;
	}
	.timeBox dt.cur::after{
	    width: 1.07rem;
		height: 0.56rem;
	}
	.timeBox dt span{
		width: 1.07rem;
		position: relative;
	}
	.timeBox dt.cho.cur span{
		margin: 0;
		background: none;
	}
	.timeBox dt.cur span:after{
		content: "已约满";
		width: 6em;
		height: 0.7rem;
		line-height: 0.78rem;
		text-align: center;
		position: absolute;
		top: -0.8rem;
		left: 0;
		color: #333333;
		background: #FFFFFF;
		border-radius: 0.1rem;
		box-shadow: 0rem -0.01rem 0.1rem 0.0008rem #ddd;
		display: block;
		
	}
	.timeBox dt.cho span:after{
		display: none;
	}
	
	.suc_confirm{
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background: rgba(0,0,0,0.5);
		font-size: 0.3rem;
		display: none;
	}
	.suc_confirm .suc_cont{
		width: 6rem;
		background: #FFFFFF;
		left: 0;
		right: 0;
		margin: auto;
		top: 50%;
		transform: translateY(-50%);
		position: absolute;
		border-radius: 0.2rem;
		padding: 0 0.5rem;
		
		
	}
	.suc_confirm .suc_cont h5{
		color: #333;
		text-align: center;
		margin-top: 0.3rem;
		line-height: 0.9rem;
	}
	.suc_confirm .suc_cont p{
		text-align: center;
		color: #666;
		line-height: 1.6em;
	}
	.suc_confirm .suc_cont a{
		display: block;
		text-align: center;
		line-height: 0.9rem;
		color: #536998;
		border-top: 1px solid #eee;
		margin-top: 0.5rem;
	}
  </style>
 </head>
 <body>
 	<div class="topBox">
    <div class="choseAddress">
  	  <div class="addRess">
      	<h2>{$data['shop']['name']}</h2>
        <p>{$data['shop']['address']}</p>
      </div>
      {if $shoplength > 1}
      <a href='/{php echo createMobileUrl("wx",array("planedid"=>$planedid,"themeid"=>$themeid,"date"=>$date,"birthday"=>$birthday,"from"=>"mobile","r"=>"shopplan.getshops"));}' class="linkAdd">切换门店</a>
      {else}
      <a href="tel:{$data['shop']['phone']}" class="linkAdd2">联系门店</a>
      {/if}
    </div>
  </div>
    <div class="contBox">
    	<div class="leftSlide">
        	<ul class="slideCho">
              {if $datenow != $data['days'][0]['date']}
                <a href='/{php echo createMobileUrl("wx",array("planedid"=>$planedid,"themeid"=>$themeid,"shopid"=>$shopid,"birthday"=>$birthday,"date"=>$datenow,"from"=>"mobile","r"=>"shopplan.getweeknav"));}' >  
                  <li>
                    <div class="slideTxt">
                          <p >当前日期</p>
                      </div>
                  </li>
                </a>
              {/if}
              {loop $data['days'] $index $item}
            	  <li>
                	<div class="slideTxt">
                        <p>{$item['date']}</p>
                        <span>{$item['week']}</span>
                    </div>
                </li>
              {/loop}   
                <a href='/{php echo createMobileUrl("wx",array("planedid"=>$planedid,"themeid"=>$themeid,"shopid"=>$shopid,"birthday"=>$birthday,"from"=>"mobile","r"=>"shopplan.getcalendar"));}' >  
                  <li>
                  	<div class="slideTxt">
                          <p >其他日期</p>
                      </div>
                  </li>
                </a>
            </ul>
        </div>
        <div class="rightSlide">
        	<div class="timeSlide"  onscroll="scrollfunc()">
            	<ul>

                {loop $data['days'] $index $item}
                	  <li class="t{php echo $index+1 ;}">
                    	<div class="timeTitle">
                        	<p value="{$item['tplid']}">{$item['date']}</p>
                            <span>{$item['week']}</span>
                        </div>
                        <div class="timeInfor">

                            <div class="timeChose"  {if $item['tplid'] == 0} style="display: none;"{/if}>
                                <div class="timeList">
                                    <h2>上午时段:</h2>
                                    
                                    <dl class="timeBox">
                                    {loop $item['am'] $index01 $amitem}  
                                      {if $item['am_can_plan'][$index01] == 1}
                                        <dt class="cho">
                                      {else}
                                        <dt>
                                      {/if}
                                        <span>{$amitem}</span>
                                      </dt>
                                    {/loop}   
                                    </dl>
                                    
                                </div>
                            </div>
                            {if empty($item['am']) && $item['totalnums'] != 0}
                            <div class="noTime">
                                本时段已约满 
                                {if $shoplength > 1}
                                <a href='/{php echo createMobileUrl("wx",array("planedid"=>$planedid,"themeid"=>$themeid,"date"=>$date,"birthday"=>$birthday,"from"=>"mobile","r"=>"shopplan.getshops"));}'>切换门店</a>
                                {/if}
                            </div>

                            {/if}
                            <div class="timeChose"  {if $item['tplid'] == 0} style="display: none;"{/if}>
                                <div class="timeList">
                                    <h2>下午时段:</h2>
                                    <dl class="timeBox">
                                    {loop $item['pm'] $index02 $pmitem} 
                                      {if $item['pm_can_plan'][$index02] == 1}
                                        <dt class="cho">
                                      {else}
                                        <dt>
                                      {/if}

                                        <span>{$pmitem}</span>
                                      </dt>
                                    {/loop} 
                                    </dl>
                                </div>
                            </div>
                            {if empty($item['pm']) && $item['totalnums'] != 0}
                            <div class="noTime">
                                本时段已约满 
                                {if $shoplength > 1}
                                <a href='/{php echo createMobileUrl("wx",array("planedid"=>$planedid,"themeid"=>$themeid,"date"=>$date,"birthday"=>$birthday,"from"=>"mobile","r"=>"shopplan.getshops"));}'>切换门店</a>
                                {/if}
                            </div>
                            {elseif $item['tplid'] == 0}
                            <div class="noTime">
                                <br>休息日 
                                {if $shoplength > 1}
                                <a href='/{php echo createMobileUrl("wx",array("planedid"=>$planedid,"themeid"=>$themeid,"date"=>$date,"birthday"=>$birthday,"from"=>"mobile","r"=>"shopplan.getshops"));}'>切换门店</a>
                                {/if}
                            </div>
                            {/if}

                        </div>
                    </li>
                  {/loop} 

                </ul>
            </div>
        </div>
    </div>
    <div class="fixBottom">
    	<a onclick="savePlaned()">确定</a>
    </div>
	<div class="suc_confirm">
		<div class="suc_cont">
			<h5>提示</h5>
			<p></p>
			<a href='/{php echo createMobileUrl("index",array("themeid"=>$themeid,"from"=>"mobile"));}'>确定</a>
		</div>
	</div>
 </body>
 <script>
  var time;
  var date_s;
  var tplid;
  var scrollFlag=true;
 	$('.timeChose dt').click(function(e){
		$('.timeChose dt').removeClass('cur');
		$(this).addClass('cur');
    time = e.currentTarget.innerText;
    var dataitem=$(this).parents('.timeInfor').parent();
    date_s=dataitem.find("p")[0].innerText;
    tplid = dataitem.find("p").attr("value");
	})
	
	var scrollTH=$(".timeSlide").height()/3;
	var sLength=$(".timeSlide ul>li").length;
	var m_t=$('.t2').outerHeight(true)-$('.t2').outerHeight();
	function scrollfunc(){
		var sScrollTop=$(".timeSlide").scrollTop();
		var allHeight=0;
		for(var i=0;i<sLength;i++){
			if(($(".timeSlide").scrollTop()>(allHeight-scrollTH))&&($(".timeSlide").scrollTop()<(allHeight+$(".timeSlide ul li").eq(i).height()+m_t-scrollTH))){
				allHeight+=$(".timeSlide ul li").eq(i).height()+m_t;
				if(scrollFlag){
					
					$(".slideCho>li").removeClass("cur");
					$(".slideCho>li").eq(i).addClass("cur");
					$(".leftSlide").scrollTop($(".slideCho>li").height()*(i+1));
				}
				return;
			}
			allHeight+=$(".timeSlide ul li").eq(i).height()+m_t;
		}
	}
	$(function(){
		// LiftEffect({
		// 	"control1": ".leftSlide", 						  //侧栏电梯的容器
		// 	"control2": ".slideCho",                           //需要遍历的电梯的父元素
		// 	"target": [".t1",".t2",".t3",".t4",".t5",".t6",".t7"], //监听的内容，注意一定要从小到大输入
		// 	"current": "cur" 						  //选中的样式
		// });		
		var indext = {$t};
		rightScrollTo(indext);
		//获取日历页中选中的日期
		var heights = $('.slideCho>li').height();
		var scrollSpace = (indext+1)*heights;
		$('.leftSlide').stop().animate({scrollTop:scrollSpace})
		$(".leftSlide ul>li").eq(indext).addClass("cur")
		//右侧滚动到日历页中的选中日期


	})
	function rightScrollTo(indext){
		scrollFlag=false;
		var allHeight=0;
		for(var i=0;i<indext;i++){
			allHeight+=$(".timeSlide ul li").eq(i).height()+m_t;
		}
		  $(".timeSlide").stop().animate({
			"scrollTop": allHeight-scrollTH+10
		  },500,function(){
			scrollFlag=true;
		  });
	}
	$('.slideCho>li').click(function(e){
		$('.slideCho>li').removeClass('cur');
		$(this).addClass('cur');
		var index=$(".slideCho>li").index($(this));
		// console.log(index);
		rightScrollTo(index);
		var heights = $('.slideCho li').height();
		var scrollSpace = (index+1)*heights;
		$('.leftSlide').stop().animate({scrollTop:scrollSpace})
	})
	
$(function(){
       //得到当前时间
	var date_now = new Date();
	//得到当前年份
	var year = date_now.getFullYear();
	//得到当前月份
	//注：
	//  1：js中获取Date中的month时，会比当前月份少一个月，所以这里需要先加一
	//  2: 判断当前月份是否小于10，如果小于，那么就在月份的前面加一个 '0' ， 如果大于，就显示当前月份
	var month = date_now.getMonth()+1 < 10 ? "0"+(date_now.getMonth()+1) : (date_now.getMonth()+1);
	//得到当前日子（多少号）
	var date = date_now.getDate() < 10 ? "0"+date_now.getDate() : date_now.getDate();
	//设置input标签的max属性
	$("#birthday").attr("max",year+"-"+month+"-"+date);
})
$(function(){
		var zheight = $('.topBox').height() + $('.fixBottom').height();
		var windowHeight = ($(window).height() - zheight)/8;
		$('.slideCho li').height(windowHeight);
	})


  //入库，返回信息
  function savePlaned(){
	if((!$(".cur").hasClass("cho"))&&($(".timeSlide .cur").length>0)){
		layer.msg('此时段已约满！');
		return;
	}
    var postUrl = '/{php echo createMobileUrl("wx",array("planedid"=>$planedid,"themeid"=>$themeid,"shopid"=>$shopid,"birthday"=>$birthday,"from"=>"mobile","r"=>"shopplan.userplaned"));}';
    var success_redirect = '/{php echo createMobileUrl("index",array("themeid"=>$themeid,"from"=>"mobile"));}';

    var birthday = '{$birthday}';

    if (birthday == '' && '{$agelimit}' ==1) {
      layer.msg('请填写宝贝生日！');
      return false;
    }
    if (time == undefined) {
      layer.msg('请选择时间段！');
      return false;
    }

    $.ajax({
        type:'POST',
        dataType:'json',
        url:postUrl,
        data:{time:time,date:date_s,tplid:tplid},
        success:function (res){
          var data = res.data;
          var ruleBtn = data.ruleBtn_html;
		  $(".suc_confirm p").html(ruleBtn);
		  $(".suc_confirm").show();
          // alert(ruleBtn,'',function(){
          //   window.location.href = success_redirect;
          // });
          // layer.confirm(ruleBtn,{
          //     btn: ['确定']
          //   }, function () {
          //     window.location.href = success_redirect;
          //   });


          // if (confirm(ruleBtn)) {
          //   window.location.href = success_redirect;
          // } else {
          //   window.location.href = success_redirect;
          // }


        }
    });

  }

 </script>
 {include file='base/addlog'}
</html>
